<template>
  <div class="rungroup-info">
    <loading v-show="loadingStatus"/>
    <transition name="fade">
      <div class="cnt" v-show="!loadingStatus">
        <div id="container" class="amap"></div>
        <div class="map-marker"></div>
        <div class="cnt-box">
          <div class="data-info">
            <div class="total">
              <div class="data">
                <p class="mailage">{{record.mileage/1000 || 0}} <span>公里</span></p>
                <p class="time">{{record.endTime*1000 | formatDate}}</p>
              </div>
              <div class="user">
                <img class="pic" v-if="record.imageUrl" :src="record.imageUrl" alt="">
                <img src="@/assets/images/male.png" alt="" v-if="!record.imageUrl&&record.sex===0">
                <img src="@/assets/images/female.png" alt="" v-if="!record.imageUrl&&record.sex===1">
                <p class="max">最慢: {{max[1] | formatSecond(1)}}</p>
                <p class="min">最快: {{max[0] | formatSecond(1)}}</p>
              </div>
            </div>
            <div class="steps">
              <div class="item vux-1px-b">
                <b>{{record.avgPace | formatSecond(1)}}</b>
                <span>平均配速</span>
              </div>
              <div class="item vux-1px-b">
                <b>{{record.duration | formatSecond(2)}}</b>
                <span>时长</span>
              </div>
              <div class="item vux-1px-b">
                <b>{{record.calorie || '--'}}</b>
                <span>大卡</span>
              </div>
              <div class="item">
                <b>{{record.totalStep || '--'}}</b>
                <span>步数(步)</span>
              </div>
              <div class="item">
                <b>{{record.avgFrequency || '--'}}</b>
                <span>步频(步/分钟)</span>
              </div>
              <div class="item">
                <b>{{'--'}}</b>
                <span>步幅(厘米)</span>
              </div>
            </div>
          </div>
          <div class="medal" v-if="record.medals && record.medals.length > 0">
            <div class="title">
              <h3>本次跑步获得{{record.medals.length || 0}}个勋章</h3>
            </div>
            <div class="medal-box">
              <div class="medal-item" v-for="(item, index) in record.medals" :key="index">
                <img :src="item.imageUrl" alt="">
                <p class="name">{{item.name}}</p>
              </div>
            </div>
          </div>
          <div class="speed-box">
            <div class="title">
              <h3 class="name">配速</h3>
              <p class="unit"><span class="km">KM</span> <span class="box"></span> 最快配速</p>
            </div>
            <div class="list-box" v-if="record.kmPace">
              <div v-for="(item,index) in record.kmPace" :key="index">
                <div class="item">
                  <span class="label">{{item.km}}</span>
                  <div class="progress">
                    <div class="average" :style="{width: (item.p/max[1]*100) +'%'}" :class="{'active': item.p === max[0]}">{{item.p | formatSecond(1)}}</div>
                  </div>
                </div>
                <div class="item middle" v-if="(index+1)%5===0">
                  {{Math.ceil(index/5)*5}}公里累计用时 {{totalTime(Math.ceil(index/5)*5) | formatSecond(2)}}
                </div>
                <div class="item middle" v-if="index === record.kmPace.length-1 && (record.mileage/1000)%5 !==0">
                  最后不足一公里用时 {{lastTime | formatSecond(2)}}
                </div>
              </div>
            </div>
          </div>
          <div class="shoes" v-if="record" @click="toLinkUrl">
            <img :src="record.item.imageUrl" alt="">
            <p>{{record.item.introduce}}</p>
          </div>
           <download />
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import api from '@/api/run'
import { dateFormat } from 'vux'
import Loading from '@/components/loading'
import icon from '@/assets/images/guangbiao.png'
import Download from '@/components/download'
export default {
  components: {
    Loading,
    Download
  },
  methods: {
    // 获取数据
    getRecord () {
      api.getRecord({recordId: this.recordId}).then((res) => {
        if (res.data.code === 200) {
          this.record = res.data.data
          this.initMap()
        } else {
          // 隐藏loading
          this.loadingStatus = false
          this.$vux.toast.text('获取数据失败,！', 'top')
        }
      }).catch()
    },
    // 计算时间
    totalTime (num) {
      let record = this.record.kmPace
      if (!record || record.length < 5) {
        return ''
      } else {
        let time = 0
        for (let i = 0; i < num; i++) {
          time += record[i].p
        }
        return time
      }
    },
    // 去商品详情
    toLinkUrl () {
      window.location.href = 'https://www.odun.com/dist/goods/gindex.html'
    },
    // 初始化地图
    initMap () {
      // 地图回调
      let x = this.record.routeDetail[1].lo || 116.397428
      let y = this.record.routeDetail[1].la || 39.90923
      let features1 = ['bg', 'point', 'road', 'building']
      let features2 = ['bg']
      let features = (this.hideMap - 0) === 0 ? features2 : features1
      // eslint-disable-next-line
      this.maps = new AMap.Map('container', {
        dragEnable: false,
        zoomEnable: false,
        resizeEnable: false,
        center: [x, y],
        features: features,
        zoom: 14
      })
      // this.maps.setCenter([x, y])
      this.maps.setMapStyle('amap://styles/macaron')
      // 隐藏loading
      this.loadingStatus = false
      // this.draw()
      setTimeout(() => {
        this.draw()
      }, 1000)
    },
    // 地图运动轨迹
    draw () {
      let pointList = this.record && this.record.routeDetail
      let timer = ''
      if (!pointList) {
        timer = setTimeout(() => {
          this.draw()
        }, 1000)
        return false
      } else {
        clearTimeout(timer)
      }
      let _this = this
      /* eslint-disable */ 
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
        var emptyLineStyle = {
          lineWidth: 0,
          fillStyle: null,
          strokeStyle: null,
          borderStyle: null
        }
        var pathSimplifierIns = new PathSimplifier({
          zIndex: 100,
          // autoSetFitView:false,
          map: _this.maps, // 所属的地图实例
          getPath: function (pathData, pathIndex) {
            return pathData.path
          },
          getHoverTitle: function (pathData, pathIndex, pointIndex) {
            return null
          },
          renderOptions: {
            // 将点、线相关的style全部置emptyLineStyle
            pathLineStyle: emptyLineStyle,
            pathLineSelectedStyle: emptyLineStyle,
            pathLineHoverStyle: emptyLineStyle,
            keyPointStyle: emptyLineStyle,
            startPointStyle: emptyLineStyle,
            endPointStyle: emptyLineStyle,
            keyPointHoverStyle: emptyLineStyle,
            keyPointOnSelectedPathLineStyle: emptyLineStyle
          }
        })
        window.pathSimplifierIns = pathSimplifierIns
        let arr = []
        for (let i = 2; i < _this.record.routeDetail.length; i++) {
          let item = _this.record.routeDetail[i]
          let lngX = item.lo
          let latY = item.la
          arr.push([lngX, latY])
        }
        pathSimplifierIns.setData([{
          name: '跑步路径地图',
          path: arr
        }])
        // initRoutesContainer(d)
        // function onload () {
        //   pathSimplifierIns.renderLater()
        // }
        var navg1 = pathSimplifierIns.createPathNavigator(0, {
          loop: false,
          speed: 3000,
          pathNavigatorStyle: {
            width: 24,
            height: 24,
            // 使用图片
            content: PathSimplifier.Render.Canvas.getImageContent(icon, onload, onerror),
            strokeStyle: null,
            fillStyle: null,
            // 经过路径的样式
            pathLinePassedStyle: {
              lineWidth: 4,
              strokeStyle: '#0CAE6D',
              dirArrowStyle: false
            }
          }
        })
        navg1.start()
        var timer = setInterval(() => {
          if (!navg1) {return false}
          if (navg1.isCursorAtPathEnd()) {
            let _x = _this.record.routeDetail[_this.record.routeDetail.length -1].lo
            let _y = _this.record.routeDetail[_this.record.routeDetail.length -1].la
            var marker2 = new AMap.Marker({
              position: new AMap.LngLat(_x, _y),
              offset: new AMap.Pixel(-10, -10),
              content: '<div class="map-cirlce-end">终</div>', // 添加 Icon 图标 URL
              title: '结束'
            })
            _this.maps.add(marker2)
            clearInterval(timer)
          } else {
          }
        }, 500)
      })

      let x = this.record.routeDetail[1].lo
      let y = this.record.routeDetail[1].la
      /* eslint-disable */ 
      var marker = new AMap.Marker({
        position: new AMap.LngLat(x, y),
        offset: new AMap.Pixel(-10, 0),
        content: '<div class="map-cirlce-start">始</div>', // 添加 Icon 图标 URL
        title: '开始'
      })
      this.maps.add(marker)  
    }
  },
  computed: {
    lastTime () {
      let time = 0
      this.record.kmPace.forEach(element => {
        time += element.p
      })
      return this.record.duration - time
    },
    max () {
      if (!this.record.kmPace) {
        return [0, 0]
      }
      if (this.record.kmPace.length === 0) {
        return [this.record.maxPace, this.record.minPace]
      }
      let max = 0
      let min = this.record.kmPace.length > 0 && this.record.kmPace[0].p || 0
      this.record.kmPace.forEach(ele => {
        if (ele.p > max) {
          max = ele.p
        }
        if (ele.p < min) {
          min = ele.p
        }
      })
      return [min, max]
    }
  },
  filters: {
    dateFormat,
    formatSecond (val, type) {
      if (!val) return '--'
      let h = parseInt(val / 3600, 10)
      let m = parseInt((val - 3600 * h) / 60, 10)
      let s = val - m * 60 - h * 3600
      if (type === 1) {
        m = m >= 10 ? m : '0' + m
        s = s >= 10 ? s : '0' + s
        return `${m}'${s}"`
      } else if (type === 2) {
        h = h >= 10 ? h : '0' + h
        m = m >= 10 ? m : '0' + m
        s = s >= 10 ? s : '0' + s
        return `${h}:${m}:${s}`
      }
    }
  },
  created () {
    if (this.$route.query.recordId) {
      this.recordId = this.$route.query.recordId
      this.hideMap = this.$route.query.hideMap
      this.getRecord()
    } else {
      let query = window.location.href.split('run?')[1] || ''
      if (query.indexOf('&') > -1) {
        query = query.split('&')[0]
      }
      query = window.decodeURIComponent(query).replace(/\s/g, '+')
      if (!query) {
        this.$vux.toast.text('参数错误！', 'center')
        return false
      }
      let parmas = this.common.encrypt('123', 'odunSmar')
      let string = this.common.decrypt(query, parmas.key)
      this.recordId = this.common.getQueryString('recordId', string)
      this.hideMap = this.common.getQueryString('hideMap', string)
      this.getRecord()
    }
  },
  mounted () {
  },
  data () {
    return {
      loadingStatus: true,
      recordId: '',
      hideMap: 0,
      record: '',
      maps: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.rungroup-info{
  .amap{
    height: 35rem;
    width: 100%;
    z-index: 1;
  }
  .map-marker{
    position: absolute;
    width: 100%;
    height: 35rem;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .cnt-box{
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 1rem;
  }
  .data-info{
    margin-top: -1rem;
    border-radius: 1rem;
    position: relative;
    background-color: #fff;
    padding: 1rem;
    z-index: 2;
    box-shadow: 0 -8px 20px -10px #999;
    .total{
      display: flex;
      .data{
        flex: 1;
        .mailage{
          padding-top: 1.2rem;
          font: normal 5rem 'BrandonGrotesque';
          span{
            font-size: 1.4rem;
          }
        }
        .time{
          color: #999;
          padding: 0 0 0.8rem 0.2rem;
          font-size: 1.2rem;
        }
      }
      .user{
        width: 10rem;
        text-align: center;
        .pic{
          margin-top: -2.2rem;
          width: 6rem;
          height: 6rem;
          border-radius: 50%;
          border:3px solid #fff;
        }
        .max,.min{
          // text-align: left;
          line-height: 1.6;
          color: #2c2c2c;
          font-size: 1.2rem;
          padding-left: 0.5rem;
        }
        .max{
          padding-top: 0.2rem;
        }
      }
    }
    .steps{
      margin: 0 1rem;
      overflow: hidden;
      .item{
        float: left;
        width: 33.33%;
        text-align: center;
        padding-bottom: 2rem;
        b{
          display: block;
          padding-top: 1.5rem;
          font: normal 2rem 'BrandonGrotesque';
        }
        span{
          display: inline-block;
          color: #999;
          padding-top: 0.5rem;
          font-size: 1.2rem;
          line-height: 1.2;
        }
      }
    }
  }
  .speed-box{
    border: 1rem solid #f5f5f5;
    border-left: none;
    border-right: none;
    padding: 1.5rem 1rem;
    .title{
      font-family: 'PingFangSC';
      color: #2c2c2c;
      .name{
        font-size: 1.6rem;
      }
      .unit{
        padding-top: 1rem;
        font-size: 1.2rem;
        color: #666;
        .km{
          font-family: 'BrandonGrotesque';
        }
        .box{
          margin-left: 1rem;
          margin-right: 0.5rem;
          display: inline-block;
          width: 14px;
          height: 14px;
          vertical-align: top;
          background-image: -webkit-linear-gradient(0deg, #44C99F, #15A96A)
        }
      }
    }
    .list-box{
      padding: 1rem 0;
      .item{
        display: flex;
        margin-bottom: 0.5rem;
        .label{
          width: 2rem;
          text-align: center;
          margin-right: 1rem;
          display: inline-block;
          line-height: 2rem;
          font-family: 'BrandonGrotesque';
          font-weight: bolder;
          font-size: 1.2rem;
        }
        .progress{
          flex: 1;
          background-color: #F5F5F5;
          border-radius: 1rem;
          height: 2rem;
          line-height: 2rem;
          color: #fff;
          font-size: 1.2rem;
          overflow: hidden;
          margin-right: 1rem;
          .average{
            height: 2rem;
            border-radius: 1rem;
            padding-left: 1rem;
            background-image: -webkit-linear-gradient(0deg, #FEDF0C, #FFB430)
          }
          .active{
            width: 30%;
            height: 2rem;
            border-radius: 1rem;
            padding-left: 1rem;
            background-image: -webkit-linear-gradient(0deg, #44C99F, #15A96A)
          }
        }
      }
      .middle{
        color: #999;
        font-size: 1.2rem;
        padding: 0.5rem 3rem;
      }
    }
  }
  .medal{
    border-top: 1rem solid #f5f5f5;
    padding: 3rem 1rem 2rem;
    .title{
      font-size: 1.2rem;
      padding-bottom: 2rem;
    }
    .medal-box{
      display: flex;
      width: 100%;
      overflow-y: hidden;
      
      overflow-x: auto;
      justify-content: space-between;
      .medal-item{
        text-align: center;
        margin-right: 1rem;
        img{
          width: 3rem;
          height: 4rem;
        }
        .name{
          width: 8rem;
          font-size: 1.2rem;
          color: #999;
          padding-top: 0.5rem;
          line-height: 1.2;
          word-break: break-all;
        }
      }
    }
  }
  .shoes{
    padding: 2rem 1.5rem;
    overflow: hidden;
    text-align: center;
    img{
      height: 14rem;
      width: 100%;
      margin-bottom: 1rem;
    }
    p{
      text-align: left;
      line-height: 1.6;
      color: #666;
      text-indent: 2rem;
      font-size: 1.2rem;
    }
  }
  .download{
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    .download-cnt{
      display: flex;
      .pic{
        flex: 1;
        img{
          width: 5rem;
          float: left;
          margin-right: 1rem;
        }
        p{
          padding-top: 0.6rem;
          font-size: 1.4rem;
        }
        span{
          display: inline-block;
          padding-top: 1rem;
          font-size: 1rem;
          color: #666;
        }
      }
      .download-img{
        width: 10rem;
        text-align: right;
        padding-top: 0.5rem;
        img{
          width: 4rem;
        }
      }
    }
  }
}
</style>
